<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name=viewport
			content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no,minimal-ui">
		<meta name="referrer" content="no-referrer">
		<title>本地影视</title>
		<style>
			@import url("button.css");
		</style>
		<style type="text/css">
			html,
			body {
				background-color: black;

			}
		</style>

	</head>
	<body>
		<div style=" width: 100%;display: flex; justify-content: center; align-items: center;">

			<div style=" width: 80%;">

				<div id="mse"></div>
			</div>
		</div>
		<link rel="stylesheet" href="https://unpkg.byted-static.com/xgplayer/3.0.10/dist/index.min.css" />
		<script charset="utf-8" src="https://unpkg.byted-static.com/xgplayer/3.0.10/dist/index.min.js"></script>

		<script charset="utf-8" src="https://unpkg.byted-static.com/xgplayer-hls/3.0.10/dist/index.min.js"></script>


		<div style="display: flex; justify-content: center; align-items: center;">
			<input style="width: 70%;" type="text" id="urlInput" placeholder="请输入Url">
			<button onclick="OnPlay()">播放</button>
		</div>

		<div id="m3u8ButtonContainer"></div>
		<div id="mp4ButtonContainer"></div>

		<script>
			//默认 播放数据
			const config = {
				"id": "mse",
				"url": "./image/PlayBackground.mp4",
				"playsinline": true,
				"poster": "./image/PlayBackground.jpg",
				"plugins": [],
				"fluid": true,
				"playbackRate": [
					0.5,
					1,
					1.5,
					2
				],
				"keyShortcut": "on",
				"closeVideoClick": true,
				"closeVideoDblclick": true,
				"closeVideoTouch": true,
			}
			//config.plugins.push(HlsPlayer)
			let player = new Player(config)
			player.emit('resourceReady', [])



			function OnPlayM3U8Name(name) {
				const playPathName = "/video/m3u8/"; //播放文件夹
				var url = "http://" + window.location.hostname + ":" + window.location.port + playPathName + name +
					"/index.m3u8/index.m3u8";

				// console.log(url);

				const config = {
					"id": "mse",
					"url": url,
					"playsinline": true,
					"poster": "./image/PlayBackground.jpg",
					"plugins": [],
					"fluid": true,
					"playbackRate": [
						0.5,
						1,
						1.5,
						2
					],
					"keyShortcut": "on",
					"closeVideoClick": true,
					"closeVideoDblclick": true,
					"closeVideoTouch": true,
					"autoplay": true
				}
				config.plugins.push(HlsPlayer)
				let player = new Player(config)
				player.emit('resourceReady', [])
			}

			function OnPlayMP4Name(name) {
				const playPathName = "/video/mp4/"; //播放文件夹
				var url = "http://" + window.location.hostname + ":" + window.location.port + playPathName + name;

				console.log(url);

				const config = {
					"id": "mse",
					"url": url,
					"playsinline": true,
					"poster": "./image/PlayBackground.jpg",
					"plugins": [],
					"fluid": true,
					"playbackRate": [
						0.5,
						1,
						1.5,
						2
					],
					"keyShortcut": "on",
					"closeVideoClick": true,
					"closeVideoDblclick": true,
					"closeVideoTouch": true,
					"autoplay": true
				}
				let player = new Player(config)
				player.emit('resourceReady', [])
			}

			const m3u8ButtonContainer = document.getElementById('m3u8ButtonContainer');
			const m3u8NamePath = "./video/m3u8/name.txt"; //视频文件名称文件

			fetch(m3u8NamePath)
				.then(response => response.text())
				.then(data => {
					//console.log(data);
					// 进一步处理数据
					const names = data.split(/\r?\n|\r/);
					names.forEach(text => {
						const button = document.createElement('button');
						button.textContent = text;
						// button.classList.add('custom-btn');
						// button.classList.add('btn-1');
						button.addEventListener('click', function() {
							// 在点击事件处理函数中获取按钮名称（这里就是按钮的文本内容）
							const buttonName = this.textContent;
							OnPlayM3U8Name(buttonName);
							//console.log(`点击了按钮：${buttonName}`);
						});
						m3u8ButtonContainer.appendChild(button);
					});
				})
				.catch(error => console.error(error));

			const mp4ButtonContainer = document.getElementById('mp4ButtonContainer');
			const mp4NamePath = "./video/mp4/name.txt"; //视频文件名称文件

			fetch(mp4NamePath)
				.then(response => response.text())
				.then(data => {
					//console.log(data);
					// 进一步处理数据
					const names = data.split(/\r?\n|\r/);
					names.forEach(text => {
						const button = document.createElement('button');
						button.textContent = text;
						// button.classList.add('custom-btn');
						// button.classList.add('btn-1');
						button.addEventListener('click', function() {
							// 在点击事件处理函数中获取按钮名称（这里就是按钮的文本内容）
							const buttonName = this.textContent;
							OnPlayMP4Name(buttonName);
							//console.log(`点击了按钮：${buttonName}`);
						});
						mp4ButtonContainer.appendChild(button);
					});
				})
				.catch(error => console.error(error));

			function OnPlay() {
				var url = document.getElementById('urlInput').value;
				const config = {
					"id": "mse",
					"url": url,
					"playsinline": true,
					"poster": "./image/PlayBackground.jpg",
					"plugins": [],
					"fluid": true,
					"playbackRate": [
						0.5,
						1,
						1.5,
						2
					],
					"keyShortcut": "on",
					"closeVideoClick": true,
					"closeVideoDblclick": true,
					"closeVideoTouch": true,
					"autoplay": true
				}
				if (url.endsWith(".mp4")) {

				} else if (url.endsWith(".m3u8")) {
					config.plugins.push(HlsPlayer)
				}

				let player = new Player(config)

				player.emit('resourceReady', [])
			}
		</script>
	</body>
</html>